<template>
  <div class="task-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>我的任务</span>
          <el-button type="primary" @click="loadTasks">刷新</el-button>
        </div>
      </template>
      
      <el-table :data="tasks" v-loading="loading">
        <el-table-column prop="name" label="任务名称" />
        <el-table-column label="流程信息">
          <template #default="{ row }">
            <div>标题：{{ row.variables.title }}</div>
            <div>发起人：{{ row.variables.initiatorName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleApprove(row)">
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 审批对话框 -->
    <el-dialog v-model="dialogVisible" title="审批" width="600px">
      <el-form :model="approvalForm" ref="approvalFormRef" label-width="80px">
        <!-- 显示流程变量 -->
        <el-descriptions :column="1" border>
          <el-descriptions-item label="标题">
            {{ currentTask?.variables.title }}
          </el-descriptions-item>
          <el-descriptions-item label="发起人">
            {{ currentTask?.variables.initiatorName }}
          </el-descriptions-item>
          <el-descriptions-item label="申请内容">
            {{ currentTask?.variables.content }}
          </el-descriptions-item>
        </el-descriptions>

        <!-- 审批历史 -->
        <div class="approval-history">
          <div class="history-title">审批历史</div>
          <el-timeline>
            <el-timeline-item
              v-for="item in approvalHistory"
              :key="item.id"
              :type="item.approved ? 'success' : 'danger'"
              :timestamp="formatDateTime(item.createdAt)">
              <h4>{{ item.taskName }}</h4>
              <p>审批人：{{ item.approverName }}</p>
              <p>结果：{{ item.approved ? '同意' : '拒绝' }}</p>
              <p v-if="item.comment">意见：{{ item.comment }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>

        <!-- 审批表单 -->
        <el-form-item label="审批结果" required>
          <el-radio-group v-model="approvalForm.approved">
            <el-radio :label="true">同意</el-radio>
            <el-radio :label="false">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="审批意见">
          <el-input
            v-model="approvalForm.comment"
            type="textarea"
            rows="3">
          </el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApproval" :loading="submitting">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMyTasks, completeTask, getProcessHistory } from '@/api/process'
import { formatDateTime } from '@/utils/format'

const loading = ref(false)
const dialogVisible = ref(false)
const submitting = ref(false)
const currentTask = ref(null)

const tasks = ref([])
const approvalForm = reactive({
  approved: true,
  comment: ''
})

const approvalHistory = ref([])

const loadTasks = async () => {
  loading.value = true
  try {
    const response = await getMyTasks()
    tasks.value = response.data
  } catch (error) {
    ElMessage.error('加载任务失败')
  } finally {
    loading.value = false
  }
}

const handleApprove = async (task) => {
  currentTask.value = task
  approvalForm.value = {
    approved: true,
    comment: ''
  }
  
  // 加载审批历史
  try {
    const response = await getProcessHistory(task.processInstanceId)
    approvalHistory.value = response.data
  } catch (error) {
    ElMessage.error('加载审批历史失败')
  }
  
  dialogVisible.value = true
}

const submitApproval = async () => {
  if (!currentTask.value) return
  
  submitting.value = true
  try {
    await completeTask(currentTask.value.id, {
      approved: approvalForm.value.approved,
      comment: approvalForm.value.comment
    })
    ElMessage.success('审批提交成功')
    dialogVisible.value = false
    loadTasks()
  } catch (error) {
    ElMessage.error('审批提交失败')
  } finally {
    submitting.value = false
  }
}

onMounted(() => {
  loadTasks()
})
</script>

<style scoped>
.task-list {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.approval-history {
  margin: 20px 0;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.history-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #303133;
}

.el-timeline {
  padding: 0;
}

.el-timeline-item {
  padding-bottom: 20px;
}

.el-timeline-item h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #303133;
}

.el-timeline-item p {
  margin: 4px 0;
  font-size: 13px;
  color: #606266;
}
</style> 